<template>
  <div class="container">
    <toolbar :back="true" :title="$route.meta.title"></toolbar>
    <div class="t-container">
      <scroll :data="data" :loading="true" @loadMore="loadMore">
        <book-list :bookList="booksData"></book-list>
      </scroll>
    </div>
  </div>
</template>

<script>
import Toolbar from '../../../components/Toolbar'
import Scroll from 'components/Scroll'
import BookList from '../../../components/BookList'

import {getCollectionList} from 'api/CollectionApi'

export default {
  name: 'CollectionIndex',
  components: {
    Toolbar,
    Scroll,
    BookList
  },
  data () {
    return {
      data: [],
      totalPage: 1,
      search: {
        currentIndex: 1
      }
    }
  },
  computed: {
    booksData () {
      let books = []
      for (let index = 0; index < this.data.length; index++) {
        const element = this.data[index].booksVo;
        books.push(element)
      }
      return books
    }
  },
  methods: {
    getData () {
      getCollectionList (this.search)
        .then(res => {
          if(res.meta.success) {
            this.data = this.data.concat( res.data.datas);
            this.totalPage = res.data.pagination.totalPage
          }
        })
    },
    loadMore (currentIndex, $scroll) {
      this.search.currentIndex = currentIndex;
      if(this.search.currentIndex <= this.totalPage) {
        this.getData()
      } else  $scroll.forceUpdate();
    }
  },
  created () {
    this.getData();
  }
}
</script>

<style lang="stylus" scoped>

</style>
